<template>
  <view class="container">
    <view class="main">
      <view 
        class="section workout" 
        :style="{
          height: isWorkout ? '70%' : '30%',
          opacity: isWorkout ? 1 : 0.8
        }"
      >
        <text class="text" :class="{ 'text-active': isWorkout }">锻炼</text>
        <text class="time" :class="{ 'time-active': isWorkout }">{{ workoutTimeFormat }}</text>
      </view>
      <view 
        class="section rest" 
        :style="{
          height: !isWorkout ? '70%' : '30%',
          opacity: !isWorkout ? 1 : 0.8
        }"
      >
        <text class="text" :class="{ 'text-active': !isWorkout }">休息</text>
        <text class="time" :class="{ 'time-active': !isWorkout }">{{ restTimeFormat }}</text>
      </view>
    </view>
    <view class="footer">
      <view class="font-item">
        <text class="font-large cycle-text">{{ zq }}</text>
        <text class="label-text">剩余周期</text>
      </view>
      <view class="font-item" @tap="toggleTimer">
        <text class="font-large start-text" :class="{ 'running': isRunning }">
          {{ isRunning ? "暂停" : "开始" }}
        </text>
      </view>
      <view class="font-item">
        <text class="font-large cycle-text">{{ cyclesLeft }}</text>
        <text class="label-text">剩余循环</text>
      </view>
    </view>
    <view class="settings">
      <view class="setting-item">
        <text class="setting-label">循环周期</text>
        <input class="setting-input" type="number" v-model="zq" />
      </view>
      <view class="setting-item">  
        <text class="setting-label">锻炼时间(秒)</text>
        <input class="setting-input" type="number" v-model="setworkoutTime" />
      </view>
      <view class="setting-item">
        <text class="setting-label">循环次数</text>  
        <input class="setting-input" type="number" v-model="setcyclesLeft" />
      </view>
      <view class="setting-item">
        <text class="setting-label">休息时间(秒)</text>
        <input class="setting-input" type="number" v-model="setrestTime" />  
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.main {
  flex: 4;
  position: relative;
}

.section {
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  will-change: height, opacity;
}

.workout {
  background-color: #4CAF50;
  top: 0;
  z-index: 2;
}

.rest {
  background-color: #F44336;
  bottom: 0;
  z-index: 1;
}

.text {
  font-size: 60rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
  transition: transform 0.3s ease;
}

.time {
  font-size: 120rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
  transition: transform 0.3s ease;
  line-height: 1.2;
}

.text-active {
  transform: scale(1.1);
  color: #ffffff;
}

.time-active {
  transform: scale(1.1);
  color: #ffffff;
}

.footer {
  flex: 1;
  background-color: #252225;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40rpx;
}

.font-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.font-large {
  font-weight: bold;
}

.cycle-text {
  font-size: 80rpx;
  color: #FFC107;
}

.start-text {
  font-size: 80rpx;
  color: #4CAF50;
  padding: 20rpx 40rpx;
  border-radius: 20rpx;
  transition: color 0.3s ease;
}

.start-text.running {
  color: #F44336;
}

.label-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 10rpx;
}

.settings {
  padding: 40rpx;
  background-color: #1f1f1f;
  box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.2);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.setting-label {
  font-size: 32rpx;
  color: #e0e0e0;
}

.setting-input {
  width: 160rpx;
  height: 80rpx;
  background-color: #424242;
  border: none;
  border-radius: 20rpx;
  padding: 0 30rpx;
  font-size: 36rpx;
  color: #e0e0e0;
  text-align: center;
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1), 
              0 15rpx 30rpx rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
}

.setting-input:focus {
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2), 
              0 20rpx 40rpx rgba(0, 0, 0, 0.3);
}
</style>

<script>
export default {
  data() {
    return {
      workoutTime: 3,
      restTime: 3,
      cyclesLeft: 3,
      zq: 4,
      isWorkout: true,
      isRunning: false,
      interval: null,
      setworkoutTime: 0,
      setrestTime: 0,
      setcyclesLeft: 0,
    };
  },
  created() {
    this.initializeValues();
  },
  beforeDestroy() {
    // 组件销毁前清理定时器
    this.stopTimer();
  },
  computed: {
    workoutTimeFormat() {
      return this.formatTime(this.workoutTime);
    },
    restTimeFormat() {
      return this.formatTime(this.restTime);
    },
  },
  methods: {
    initializeValues() {
      this.setworkoutTime = this.workoutTime;
      this.setrestTime = this.restTime;
      this.setcyclesLeft = this.cyclesLeft;
    },
    formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = time % 60;
      return `${minutes < 10 ? "0" + minutes : minutes}:${seconds < 10 ? "0" + seconds : seconds}`;
    },
    updateTime() {
      if (!this.isRunning) return; // 如果不在运行状态，直接返回

      if (this.isWorkout) {
        this.workoutTime--;
        if (this.workoutTime === 0) {
          this.handlePeriodEnd();
        }
      } else {
        this.restTime--;
        if (this.restTime === 0) {
          this.handlePeriodEnd();
        }
      }
    },
    handlePeriodEnd() {
      if (!this.isRunning) return; // 防止重复触发

      uni.vibrateLong();
      this.switchMode();
      if (this.isWorkout) {
        this.workoutTime = this.setworkoutTime;
      } else {
        this.restTime = this.setrestTime;
        this.updateCycles();
      }
    },
    updateCycles() {
      this.cyclesLeft--;
      if (this.cyclesLeft === 0) {
        this.zq--;
        if (this.zq === 0) {
          this.stopTimer();
        } else {
          this.cyclesLeft = this.setcyclesLeft;
        }
      }
    },
    switchMode() {
      this.isWorkout = !this.isWorkout;
    },
    toggleTimer() {
      uni.vibrateLong();
      if (this.isRunning) {
        this.stopTimer();
      } else {
        this.startTimer();
      }
    },
    startTimer() {
      if (this.zq === 0) return;
      this.isRunning = true;
      // 清除可能存在的旧定时器
      if (this.interval) {
        clearInterval(this.interval);
      }
      this.interval = setInterval(this.updateTime, 1000);
    },
    stopTimer() {
      if (this.interval) {
        clearInterval(this.interval);
        this.interval = null;
      }
      this.isRunning = false;
    },
  },
};
</script>